<template>
  <div class="hl-nutrition">
    <div class="hl-card">
      <div id="main" style="width: 100%; height: 300px"></div>
    </div>
    <div class="hl-card">
      <div id="main2" style="width: 100%; height: 200px; padding-left: 8px"></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted: function () {
    let myChart = window.echarts.init(document.getElementById('main'))

    // 指定图表的配置项和数据
    let option = {
      title: {
        text: '历史营养成分统计',
        left: 'center'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '脂肪' },
            { value: 735, name: '蛋白质' },
            { value: 580, name: '维生素A' },
            { value: 484, name: '维生素B' },
            { value: 300, name: '维生素C' }
          ]
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)

    // 基于准备好的dom，初始化echarts实例
    let myChart2 = window.echarts.init(document.getElementById('main2'))

    // 指定图表的配置项和数据
    let option2 = {
      title: {
        text: '顾客历史营养成分统计',
        left: 'center'
      },
      xAxis: {
        type: 'category',
        data: ['脂肪', '蛋白质', '维生素A', '维生素B', '维生素C']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [1048, 735, 580, 484, 300],
          type: 'bar'
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2)
  }
}
</script>
<style lang="less" scoped>
.hl-nutrition {
  padding: 8px;
}
.hl-card {
  background-color: #fff;
  padding-top: 16px;
  border-radius: 12px;
  &:nth-of-type(n + 2) {
    margin-top: 8px;
  }
}
</style>
